<template>
    <div class="page-container-tab">
        <div class="mb-2 text-center" v-if="initStatus">
            <component-page-org-tree-option v-model="platCode" @change="filterChange" init-first-node :clearable="false" block></component-page-org-tree-option>
        </div>
        <div class="page-container-inner flex-auto">
            <div class="py-12">
                <div v-if="['loading', 'error'].indexOf(dataStatus) >= 0" class="text-center">
                    <component-page-loading :status="dataStatus" @reload="getData"></component-page-loading>
                </div>
                <div v-else-if="platCode != null">
                    <!--显示-->
                    <div v-if="!dataEditStatus">
                        <el-form label-width="180px" class="detail">
                            <el-form-item :label="$t('game.setting.config.basic.scenes.control.model_id')">
                                <component-page-model-view :model-id="data.scenes[index].control.model_id"
                                                           v-if="data.scenes[index].control.model_id">
                                </component-page-model-view>
                            </el-form-item>
                            <el-form-item :label="$t('game.setting.config.elementary.globals.wild_create_per_col')">
                                {{ data.globals.wild_create_per_col }}
                            </el-form-item>

                          <el-form-item :label="$t('platform.config.rtpSwitch.rtpPeriod')">
                            {{ $te(`platform.config.rtpSwitchList.${data.globals.rtp_period_switch}.label`) ? $t(`platform.config.rtpSwitchList.${data.globals.rtp_period_switch}.label`) : $t('messages.empty') }}
                          </el-form-item>

                            <!--操作-->
                            <el-form-item>
                                <el-button @click="editData">{{ $t('action.edit') }}</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                    <!--编辑-->
                    <div v-if="dataEditStatus">
                        <el-form label-width="180px" :model="dataCache">
                            <el-form-item :label="$t('game.setting.config.basic.scenes.control.model_id')"
                                          :error="Boolean(msg.errors[`scenes.${index}.control.model_id`]) ? msg.errors[`scenes.${index}.control.model_id`][0] : ''">
                                <component-page-model-option v-model="dataCache.scenes[index].control.model_id" :clearable="false"></component-page-model-option>
                            </el-form-item>
                            <el-form-item :label="$t('game.setting.config.elementary.globals.wild_create_per_col')" :error="error_globals_wild_create_per_col">
                                <el-col :span="4" v-for="(item,index) in dataCache.globals.wild_create_per_col" :key="index">
                                    <el-input v-model.number="dataCache.globals.wild_create_per_col[index]" type="number"></el-input>
                                </el-col>
                            </el-form-item>

                          <el-form-item :label="$t('platform.config.rtpSwitch.rtpPeriod')" :error="Boolean(msg.errors['globals.rtp_period_switch']) ? msg.errors['globals.rtp_period_switch'][0] : ''">
                            <el-radio v-model="dataCache.globals.rtp_period_switch" :label="1">
                              {{$t('platform.config.rtpSwitchList[1].label')}}
                            </el-radio>
                            <el-radio v-model="dataCache.globals.rtp_period_switch" :label="2">
                              {{$t('platform.config.rtpSwitchList[2].label')}}
                            </el-radio>
                          </el-form-item>
                            <!--操作-->
                            <el-form-item>
                                <el-button type="primary" @click="onSubmit">{{ $t('action.save') }}</el-button>
                                <el-button @click="dataEditStatus = false">{{ $t('action.cancel') }}</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

export default {
    props: ['activeName'],
    data() {
        return {
            initStatus: false,
            platCode: null,
            dataStatus: 'dle',
            data: {
                scenes: {
                    1001: {
                        control: {model_id: null}, //场控模型
                    }
                },
                globals: {
                    wild_create_per_col: [null, null, null, null, null], //wild概率
	                rtp_period_switch:null,//系统场控开关
                }
            },
            dataEditStatus: false,
            dataCache: {},
            msg: {
                code: 200,
                message: '',
                errors: {},
            },
            index: 1001,
        }
    },
    computed: {
        error_globals_wild_create_per_col: function () {
            for (let key in this.msg.errors) {
                if (_.startsWith(key, 'globals.wild_create_per_col')) {
                    return this.msg.errors[key][0];
                }
            }
        },
    },
    watch: {
        activeName: {
            immediate: true,
            handler(n, o) {
                if (n == 'platform' && !this.initStatus) {
                    // 标记初始化
                    this.initStatus = true;
                }
            }
        },
    },
    methods: {
        filterChange() {
            // 显示状态
            this.dataEditStatus = false;
            // 获取数据
            this.getData();
        },
        getData() {
            this.dataStatus = 'loading';
            // 获取数据
            axios.get(`/game/setting/config/elementary/${this.$route.params.game}/${this.platCode}/getConfigPlat`).then((response) => {
                if (response.data.resp_msg.code == 200) {
                    if (response.data.resp_data.scenes != null && response.data.resp_data.globals != null) {
                        this.data = response.data.resp_data;
                    }
                    this.dataStatus = 'dle';
                } else {
                    this.dataStatus = 'error';
                }
            })
        },
        initMsg() {
            this.msg.code = 200;
            this.msg.message = '';
            this.msg.errors = {};
        },
        editData() {
            // 重置验证
            this.initMsg();
            // 克隆数据
            this.dataCache = _.cloneDeep(this.data);
	        if (Array.isArray(this.dataCache.globals)) {
		        this.$set(this.dataCache, 'globals', {});
	        }
            // 编辑状态
            this.dataEditStatus = true;
        },
        onSubmit() {
            this.initMsg();
            // loading 状态 start
            let loading = this.$loading();
            // 保存数据
            axios.post(`/game/setting/config/elementary/${this.$route.params.game}/${this.platCode}/updatePlat`, this.dataCache).then((response) => {
                // loading 状态 close
                loading.close();
                // 逻辑处理
                if (response.data.resp_msg.code == 200) {
                    this.$message({
                        type: 'success',
                        message: this.$t('messages.succeeded', {status: this.$t('action.save')}),
                        showClose: true
                    });
                    this.dataEditStatus = false;
                    // 更新数据
                    this.data = response.data.resp_data;
                } else if (_.includes([42000], response.data.resp_msg.code)) {
                    this.$message({
                        type: 'error',
                        message: response.data.resp_msg.message,
                        showClose: true
                    });
                    this.msg = response.data.resp_msg;
                } else {
                    this.$message({
                        type: 'error',
                        dangerouslyUseHTMLString: true,
                        message: this.$t('messages.failed', {status: this.$t('action.save')}) + `<div class="mt-2">${response.data.resp_msg.message}</div>`,
                        showClose: true
                    });
                }
            })
        },
    }
}
</script>

<style lang="scss">

</style>
